<!--
/** 软件使用情况部件
 * Author:      huoxj
 * CreateTime:  2023/2/5 20:36:33
 * LastEditor:  huoxj
 * ModifyTime:  2023/12/5 19:30:35
 * Description:
*/
-->
<template>
  <div ref="echarsRef" :style="{ width: props.width, height: props.height }"></div>
  <a-modal :visible="dialogVisible"
    wrapClassName="full-modal"
    width="100vw" height="100vh" @ok="handleOk" @cancel="handleCancel()">
    <template #closeIcon>
      <CloseOutlined style="color:white"/>
    </template>
    <div ref="echarsDialog" style="width: 100%; height: 100%;top:0;left:0; "></div>
  </a-modal>
</template>
<script setup lang="ts">
import {ref, Ref, reactive, watchEffect, onMounted, watch, nextTick} from 'vue';
import {useECharts} from '/@/hooks/web/useECharts';
import {defHttp} from "/@/utils/http/axios";
import { CloseOutlined } from '@ant-design/icons-vue';

const props = defineProps(['width', 'height', 'software']);

const echarsRef = ref<HTMLDivElement | null>(null);

const {setOptions, echarts,getInstance: chartInstance} = useECharts(echarsRef as Ref<HTMLDivElement>, 'dark');

const option = reactive({});
// 研究总院
// 天津
// 上海
// 深圳
// 湛江
// 深圳共享中心
// 非常规油气
// 总数
// 一 使用率
function initCharts() {
  Object.assign(
    option,
    reactive({
      title: {
        show: true,
        text: '{h|' + props.software + '}{n|使用情况}',
        textVerticalAlign: 'top',
        left: 'center',
        top: 16,
        textStyle: {
          overflow: 'truncate',
          ellipsis: '...',
          rich: {
            n: {
              color: 'rgba(255, 255, 255, 1)',
              fontSize: 17,
              textBorderWidth: '1',
            },
            h: {
              color: 'rgba(255, 0, 0, 1)',
              fontSize: 17,
              fontWeight: 'bold',
            },
          },
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },
      legend: {
        type: 'scroll',
        bottom: '20px',
        textStyle: {
          fontWeight: 700,
          fontSize: 12,
          color: '#ffffff'
        },
      },
      backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
      grid: {
        containLabel: true,
        left: 'center',
        top: 'center',
        width: '86%',
        height: '70%',
      },
      yAxis: [
        {
          type: 'value',
          name: '数量',
          nameLocation: 'center',
          nameGap: 25,
          nameRotate: 90,
          splitLine: {show: false},
          splitArea: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff',
            },
          },
          nameTextStyle: {
            fontWeight: 700,
            fontSize: 12,
            color: '#ffffff'
          },
        },
        {
          type: 'value',
          name: '百分比',
          nameLocation: 'center',
          position: 'right',
          nameGap: 30,
          nameRotate: 270,
          min: 0, //最小百分比
          max: 100, //最大百分比
          axisLabel: {
            show: true,
            interval: 0, // 使x轴文字显示全
            formatter: '{value}%', //y轴数值，带百分号
            textStyle: {
              color: '#ffffff',
            },
          },
          nameTextStyle: {
            fontWeight: 700,
            fontSize: 12,
            color: '#ffffff'
          },
          splitLine: {show: false},
          splitArea: {
            show: true,
          },
        },
      ],
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: [
            'energe',
            'ECPU8',
            'json_batch_attrest',
            'jgw_statmodmc',
            'jgw_p_Core',
            'jslw_cross_corr',
            'jslw_sc',
            'jslw_wellman_interp',
            'jgw_geof43',
            'ft_prop_estim',
            'ftj_base',
            'jslw_lbf_eval',
            'AvoExtract',
            'jslw_sm',
            'batch_nrmod',
            'jgw_p_largo',
            'ef_FFP',
            'jslw_ava',
            'Wavelets',
            'jslw_disres',
          ],
        axisTick: {
          //x轴刻度相关设置
          alignWithLabel: true,
        },
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            color: '#ffffff',
          },
        },
        nameTextStyle: {
          fontWeight: 700,
          fontSize: 12,
          color: '#ffffff'
        },
      },
      series: [
        {
          name: '北京',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series',
          },
          data: [0, 2, 0, 9, 10, 10, 9, 16, 12, 11, 11, 6, 8, 9, 3, 2, 4, 8, 0],
        },
        {
          name: '天津',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series',
          },
          data: [0, 2, 0, 9, 10, 10, 9, 16, 12, 11, 11, 6, 8, 9, 3, 2, 4, 8, 0],
        },
        {
          name: '上海',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series',
          },
          data: [0, 2, 0, 9, 10, 10, 9, 16, 12, 11, 11, 6, 8, 9, 3, 2, 4, 8, 0],
        },
        {
          name: '深圳',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series',
          },
          data: [0, 2, 0, 9, 10, 10, 9, 16, 12, 11, 11, 6, 8, 9, 3, 2, 4, 8, 0],
        },
        {
          name: '湛江',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series',
          },
          data: [0, 2, 0, 9, 10, 10, 9, 16, 12, 11, 11, 6, 8, 9, 3, 2, 4, 8, 0],
        },
        {
          name: '国际',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series',
          },
          data: [0, 2, 0, 9, 10, 10, 9, 16, 12, 11, 11, 6, 8, 9, 3, 2, 4, 8, 0],
        },
        {
          name: '非常规油气',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series',
          },
          data: [0, 2, 0, 9, 10, 10, 9, 16, 12, 11, 11, 6, 8, 9, 3, 2, 4, 8, 0],
        },
        {
          name: '总数',
          type: 'line',
          stack: 'Total',
          color: '#8aa346',
          data: [0, 2, 0, 9, 10, 10, 9, 16, 12, 11, 11, 6, 8, 9, 3, 2, 4, 8, 0],
        },
        // {
        //   name: '使用率',
        //   type: 'line',
        //   color: '#f0030d',
        //   data: [120, 120, 120, 117, 106, 100, 93, 91, 82, 75, 64, 55, 52, 45, 30, 27, 25, 13, 1, 0],
        //   yAxisIndex: 1,
        // },
      ],
      toolbox: {
        feature: {
          myTool2: {
            show: true,
            title: '点击全屏',
            icon: 'M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z',
            onclick: function () {
              /** 打开对话框
              * Author:      yangjq
              * CreateTime:  2023/12/5 19:40:58
              * LastEditor:  yangjq
              * ModifyTime:  2023/12/5 19:40:58
              * Description:
              */
              openDialog();
            },
          },
        },
        top: '3%',
        right: '5%',
      },
    })
  );
  setOptions(option,false);
}

/* 加载Charts数据
 * Author:      yangjq
 * CreateTime:  2023/12/5 19:40:30
 * LastEditor:  yangjq
 * ModifyTime:  2023/12/5 19:40:30
 * Description:
*/
function loadChartsData() {

  let params = {
    softwareName: props.software,
  }
  defHttp.get({url: "/software/softContrast", params}, {isTransformResponse: false}).then((res) => {
    if (res.success) {
      let opt = {
          title: {
            show: true,
            text: '{h|' + props.software + '}{n|使用情况}',
            textVerticalAlign: 'top',
            left: 'center',
            top: 16,
            textStyle: {
              overflow: 'truncate',
              ellipsis: '...',
              rich: {
                n: {
                  color: 'rgba(255, 255, 255, 1)',
                  fontSize: 17,
                  textBorderWidth: '1',
                },
                h: {
                  color: 'rgba(255, 0, 0, 1)',
                  fontSize: 17,
                  fontWeight: 'bold',
                },
              },
            },
          },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: res.result.modelList,
          axisTick: {
            //x轴刻度相关设置
            alignWithLabel: true,
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
          },
        },
          series: [
            {
              name: '北京',
              type: 'bar',
              stack: 'total',
              emphasis: {
                focus: 'series',
              },
              data: res.result.bjList,
            },
            {
              name: '天津',
              type: 'bar',
              stack: 'total',
              emphasis: {
                focus: 'series',
              },
              data: res.result.tjList,
            },
            {
              name: '上海',
              type: 'bar',
              stack: 'total',
              emphasis: {
                focus: 'series',
              },
              data: res.result.shList,
            },
            {
              name: '深圳',
              type: 'bar',
              stack: 'total',
              emphasis: {
                focus: 'series',
              },
              data: res.result.szList,
            },
            {
              name: '湛江',
              type: 'bar',
              stack: 'total',
              emphasis: {
                focus: 'series',
              },
              data: res.result.zjList,
            },
            {
              name: '国际',
              type: 'bar',
              stack: 'total',
              emphasis: {
                focus: 'series',
              },
              data: res.result.gjList,
            },
            {
              name: '非常规油气',
              type: 'bar',
              stack: 'total',
              emphasis: {
                focus: 'series',
              },
              data: res.result.fcgyqList,
            },
            // {
            //   name: '其他',
            //   type: 'bar',
            //   stack: 'total',
            //   emphasis: {
            //     focus: 'series',
            //   },
            //   data: res.result.qtList,
            // },
            // {
            //   name: '海油发展',
            //   type: 'bar',
            //   stack: 'total',
            //   emphasis: {
            //     focus: 'series',
            //   },
            //   data: res.result.htfzList,
            // },
            {
              name: '总数',
              type: 'line',
              stack: 'Total',
              color: '#8aa346',
              data: res.result.countList,
            },
          ],
      };
      Object.assign( option, reactive(opt));
      setOptions(option,false);
    } else {
      console.log("接口错误")
    }
  });
}

const dialogVisible = ref<boolean>(false);

/** 打开对话框
 * Author:      yangjq
 * CreateTime:  2023/12/5 19:40:58
 * LastEditor:  yangjq
 * ModifyTime:  2023/12/5 19:40:58
 * Description:
*/
function openDialog() {
  let opt = Object.assign(option,reactive({toolbox:{}}));
  setOptions2(opt,true);
  dialogVisible.value = true;
  // nextTick(() => {
  //   getInstanceDialog()?.resize();
  // });
}

/**
 * 取消事件
 * @author:      yangjq
*/
function handleCancel() {
  dialogVisible.value = false;
}

/**
 * 取消事件
 * @author:      yangjq
*/
function handleOk() {
  dialogVisible.value = false;
}

const echarsDialog = ref<HTMLDivElement | null>(null);

const {
  setOptions: setOptions2,
  getInstance: getInstanceDialog
} = useECharts(echarsDialog as Ref<HTMLDivElement>, 'dark');
watchEffect(() => {
  props.software && loadChartsData();
});
onMounted(() => {
  initCharts();
});
/**
 *监听software
 */
// watch(
//   () => props.software,
//   () => {
//     props.software && initCharts();
//   }
// );
</script>
<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      background: url('/admin/bg.png');
      background-size: 100% auto;
      overflow: hidden;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
      background: transparent;
    }
    .ant-modal-body {
      flex: 1;
    }
  }
</style>
